<!--
 * @Description: echarts案例
 * @author: 
 * @since: yyyy-MM-dd
 * @page: echartsDemo.vue
-->
<template>
  <el-row>
    <el-col :span="12">
      <div class="txt-center">柱状图</div>
      <Bar></Bar>
    </el-col>
    <el-col :span="12">
      <div class="txt-center">饼图</div>
      <Pie></Pie>
    </el-col>
    <el-col :span="12">
      <div class="txt-center">雷达图</div>
      <Radar :chartData="chartData" class="radar-bcg"></Radar>
    </el-col>
    <el-col :span="12">
      <div class="txt-center">雷达图带波纹动画</div>
      <RadarRipple :chartData="chartData" class="radar-bcg"></RadarRipple>
    </el-col>
  </el-row>
</template>

<script setup>
import Bar from '@/components/echarts/bar.vue'
import Pie from '@/components/echarts/pie.vue'
import Radar from '@/components/echarts/radar.vue'
import RadarRipple from '@/components/echarts/radarRipple.vue'
defineProps({
  chartData: {
    type: Object,
    default: () => {
      return {
        // 设置max使得雷达图更精准
        indicator: [
          { name: '隐患排查治理' }, //官网用text，新版用name
          { name: '消防安全管控' },
          { name: '物资管控' },
          { name: '设备设施健康' },
          { name: '违章/事故' },
          { name: '高危作业管控' },
          { name: '人员不安全行为' },
          { name: '标准作业管控' },
          { name: '隐患追踪管控' },
        ],
        dataSeries: [
          {
            name: '数据项',
            value: [80, 60, 70, 50, 90, 40, 75, 65, 85],
          },
          // {
          //   name: '数据项',
          //   value: [90, 60, 70, 50, 90, 40, 75, 65, 85]
          // }
        ],
      }
    },
  },
})
</script>

<style lang="scss" scoped>
.txt-center {
  text-align: center;
  margin-bottom: 20px;
}
.radar-bcg {
  height: 100%;
  background: url('@/assets/images/bcg.jpg');
}
</style>
